<template>
	<view class="page">
		<nav-bar title="办理储值卡" bgColor="#FFF" titleColor="#000"></nav-bar>
		<view class="card">
			<card-item :cardItem="cardDetail" :showRecords="false" :stores='false'></card-item>
			<scroll-view scroll-y="true" :style="{height:mainHeight+'px'}">
				<view class="detail-list">
					<li v-for="(item, index) in cardConfig" :key="index">
						<view class="list-item">
							<view class="img"></view>
							<view class="title">{{ item.label }}</view>
						</view>
						<view class="content">{{ cardDetail[item.key] || '暂无' }}<text>{{ item.endSlot }}</text></view>
					</li>
					<view style="height: 75px;"></view>
				</view>
			</scroll-view>
		</view>
		<view style="height: 150rpx;"></view>
		<view class="button">
			<view class="button-item" @click="clickRecharge">
				充值
			</view>
		</view>
		<you-popup :popupVisible="popupVisible" popupTitle="储值卡充值" popupType="bottom" dialogWidth="100%"
			:showBtn="false" @popupClose="popupVisible = false">
			<view slot="popupContent" class="card-content">
				<view class="list">
					<view class="price">
						<view class="price-left">储值卡金额</view>
						<view class="price-right">￥{{ cardDetail.topUp }}</view>
					</view>
					<view class="send-box">
						<view class="send-title">赠送：赠金</view>
						<view class="send-num">￥{{ cardDetail.gift }}</view>
					</view>
					<view class="sum">
						总计 ￥<span class="num">{{ cardDetail.topUp }}</span>
					</view>
					<view class="rule-box">
						<view class="rule-title">规则说明</view>
						<view class="rule-content">{{ cardDetail.remark }}</view>
					</view>
					<view class="protocol">
						购买则视为同意<span class="protocol-item">《储值卡服务协议》</span>
					</view>
					<view class="pay-btn" @click="clickSureRecharge">
						充值
					</view>
				</view>
			</view>
		</you-popup>
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar'
	import YouPopup from '@/components/you-popup2'
	import CardItem from './components/cardItem'
	import api_storedCard from '@/api/storedCard'
	export default {
		components: {
			NavBar,
			YouPopup,
			CardItem
		},
		data() {
			return {
				cardId: '',
				storeId: '',
				cardDetail: {},
				cardConfig: [{
						label: '适用门店',
						key: 'storeNames'
					},
					{
						label: '充值金额',
						key: 'topUp',
						endSlot: '元'
					},
					{
						label: '赠送方式',
						key: 'giftWayInfo'
					},
					{
						label: '赠送金额',
						key: 'gift',
						endSlot: '元'
					},
					{
						label: '赠送优惠券名称',
						key: 'couponNames'
					},
					{
						label: '赠送优惠券数量',
						key: 'couponNumber'
					},
					{
						label: '规则说明',
						key: 'remark'
					},
				],
				popupVisible: false,
				mainHeight: ''
			}
		},
		onLoad(options) {
			this.mainHeight = this.$store.getters.heightData.mainHeight.split('px')[0] - 250
			this.cardId = options.id
			this.storeId = options.storeId
			this.getCardTypeDetail()
		},
		methods: {
			getCardTypeDetail() {
				api_storedCard.fetchStoredTypeDetail(this.cardId).then(res => {
					if (res.code !== 200) return
					this.cardDetail = res.data
				})
			},
			clickRecharge() {
				this.popupVisible = true
			},
			clickSureRecharge() {
				let that = this
				const params = {
					ruleId: this.cardId,
					storeId: this.storeId
				}
				api_storedCard.rechargeCard(params).then(res => {
					if (res.code !== 200) return
					const payParams = res.data.data
					const resParams = {
						timeStamp: payParams.timestamp,
						nonceStr: payParams.nonceStr,
						package: payParams.package,
						signType: payParams.signType,
						paySign: payParams.paySign
					}
					// 调用微信小程序的支付接口
					uni.requestPayment({
						...resParams,
						success(res) {
							uni.showToast({
								title: '充值成功',
								icon: 'none'
							})
							this.popupVisible = false
							// 支付成功的回调
							that.$tab.navigateTo('/subPages/storedCard/storedCardSuccess')
						},
						fail(res) {
							this.popupVisible = false
							// 支付失败的回调
							console.log('支付失败', res)
							that.cancelPayment()
						}
					})
				})
			},
			// 取消支付函数
			cancelPayment() {
				uni.showToast({
					title: '支付已取消',
					icon: 'none',
					duration: 2000
				})
				this.popupVisible = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.card {
			padding: 36rpx;

			.card-title {
				font-size: 36rpx;
				font-weight: 600;
				font-family: Source Han Sans CN, Source Han Sans CN;
			}

			.detail-list {
				padding: 12rpx 2rpx 0;

				li {
					padding: 16rpx;

					.list-item {
						display: flex;

						.img {
							width: 20rpx;
							height: 20rpx;
							border: 5rpx solid #C27E15;
							border-radius: 16rpx;
							margin-top: 10rpx;
						}

						.title {
							margin-left: 20rpx;
							font-size: 30rpx;
							font-weight: 500;
						}
					}

					.content {
						margin-left: 30rpx;
						line-height: 38rpx;
						padding: 16rpx;
					}
				}
			}
		}

		.button {
			position: fixed;
			width: 100%;
			bottom: 0;
			height: 148rpx;
			opacity: 1;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 13rpx #ADADAD;
			display: flex;
			justify-content: center;
			align-items: center;

			.button-item {
				width: 671rpx;
				height: 94rpx;
				background: linear-gradient(90deg, #EDD3AE 0%, #DCB17F 100%);
				border-radius: 63rpx 63rpx 63rpx 63rpx;
				opacity: 1;
				text-align: center;
				font-size: 30rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				line-height: 94rpx;
			}
		}

		.list {
			padding: 20rpx 48rpx;

			.price {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #f0f0f0;

				.price-left {
					font-size: 30rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
				}

				.price-right {
					font-size: 32rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
				}
			}

			.send-box {
				display: flex;
				margin: 20rpx 0;
				padding: 20rpx;
				border-radius: 10rpx;
				background-color: #f9f9f9;

				.send-title {
					font-size: 28rpx;
					font-weight: bold;
				}

				.send-content {
					margin-left: 40rpx;
					font-size: 24rpx;
				}
			}

			.rule-box {
				.rule-title {
					font-size: 30rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
				}

				.rule-content {
					margin-left: 8rpx;
					font-size: 28rpx;
					color: #666;
				}
			}

			.sum {
				text-align: right;
				margin-top: 32rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;

				.num {
					color: #FE4D4F;
					font-size: 40rpx;
					font-family: DIN, DIN;
				}
			}

			.protocol {
				width: 603rpx;
				margin: 36rpx auto;
				text-align: center;

				.protocol-item {
					color: #C27E15;
				}
			}

			.pay-btn {
				width: 671rpx;
				height: 94rpx;
				margin: 0 auto;
				background: linear-gradient(90deg, #EDD3AE 0%, #DCB17F 100%);
				border-radius: 63rpx 63rpx 63rpx 63rpx;
				opacity: 1;
				text-align: center;
				line-height: 94rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
			}
		}
	}
</style>